<template>
	<view class="sort">
		<headTop></headTop>
		<view class="search">
			<uv-search placeholder="请输入商品名称" v-model="keyword" :clearabled="true" :showAction="false"
				bgColor="rgba(255,255,255, .3)"></uv-search>
		</view>
		<view class="tabs">
			<uv-tabs :list="sortList" :lineColor="`url(${iconImg}) 100% 100%`" lineHeight="6"
				@change="tabChange"></uv-tabs>
		</view>
		<view class="content">
			<uv-vtabs :list="childrenList" @change="vTabChange" contentStyle="background-color: rgba(255,255,255, .3)"
				barBgColor="rgba(255, 255, 255 , .3)" :bar-item-active-line-style="{ background: getTheme.themeColor }">
				<uv-vtabs-item>
					<view v-for="item in productList" :key="item.id" class="vtabs-item"
						@tap="toProductDetails(item.id)">
						<uv-row>
							<uv-col span="3">
								<uv-image :src="item.image[0] ? item.image[0] : '/static/images/default.png'"
									width="16vw" height="16vw" radius="2vw">
									<template v-slot:error>
										<uv-image src="/static/images/default.png" width="16vw" height="16vw"
											radius="2vw"></uv-image>
									</template>
								</uv-image>
							</uv-col>
							<uv-col span="7">
								<view class="vtabs-title">{{ item.name }}</view>
								<view class="vtabs-icon">
									<uv-tags text="卡密商品" bgColor="#FAEFF7" borderColor="#FAEFF7"
										:color="getTheme.themeColor" size="mini"
										style="display: inline-block"></uv-tags>
								</view>
								<text class="vtabs-price"
									:style="{ color: getTheme.themeColor }">¥{{ item.price }}</text>
							</uv-col>
						</uv-row>
					</view>
					<view v-if="productList.length">
						<uv-divider text="已经到底了"></uv-divider>
					</view>
				</uv-vtabs-item>
			</uv-vtabs>
		</view>
		<zwTabBar :defaultSel="1" :bigIdx="1"></zwTabBar>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from "vue";
	import zwTabBar from "@/components/zw-tabbar/zw-tabbar.vue";
	import { productApi } from "@/api/index";
	import headTop from "@/components/headTop/index.vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
	const themeColor = getTheme.themeColor;

	const keyword = ref();

	/* -------------------------------------------------------Tabs分类列表---------------------------------- */
	import { getIcon } from "@/utils/index";
	const { iconImg } = getIcon();

	const sortList = ref();
	const getSortList = async () => {
		try {
			const res = await productApi.getCategoryList();
			sortList.value = res.data;

			if (sortList.value[0]) {
				tabChange(sortList.value[0]);
			}
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};
	getSortList();

	/* -------------------------------------------------------二级分类处理---------------------------------- */
	const childrenList = ref([]);
	const tabChange = async (item) => {
		if (item.children.length) {
			childrenList.value = await item.children;
			await getData(0);
		} else {
			childrenList.value = [];
			productList.value = [];
		}
	};

	const vTabChange = (index) => {
		getData(index);
	};

	/* ----------------------------------------------------商品列表-------------------------------------------- */
	const productList = ref<any>([]);
	const getData = async (index) => {
		const category_id = childrenList.value[index].id;
		try {
			const res = await productApi.getProductList({ category_id: category_id });
			productList.value = res.data.list;
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};

	/* --------------------------------------------------跳转商品详情---------------------------------------- */
	const toProductDetails = (id) => {
		uni.navigateTo({
			url: `/pages/productDetails/productDetails?id=${id}`
		});
	};
</script>

<style lang="scss">
	.sort {
		.search {
			margin-top: 3vw;
		}

		.content {
			margin-top: 2vw;

			.vtabs-item {
				background-color: rgba(255, 255, 255, 0.4);
				padding: 2vw;
				margin-bottom: 1.5vw;
				border-radius: 2vw;

				.vtabs-title {
					font-weight: 600;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.vtabs-icon {
					margin: 1vw 0;
				}

				.vtabs-price {
					font-size: 32rpx;
				}
			}
		}

		.uv-vtabs__bar-item-active--value {
			color: v-bind(themeColor) !important;
		}

		/* 		.uv-vtabs,
		.uv-vtabs__bar,
		.uv-vtabs__content {
			height: calc(100vh - 250px) !important;
		} */
	}
</style>